<template>
  <div class="merchant-remind">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>商户设置</span>
        </div>
      </template>
      
      <!-- 资金实时提醒 -->
      <div class="remind-item">
        <div class="remind-title">资金实时提醒</div>
        <div class="remind-content">
          <el-switch v-model="fundRemind.enabled" />
          <div class="phone-input" v-if="fundRemind.enabled">
            <el-input v-model="fundRemind.phone" placeholder="请输入接收手机号码" maxlength="11" />
            <el-button type="primary" class="ml-2">添加</el-button>
          </div>
        </div>
        <div class="remind-desc">充值成功后将通过短信发送至接收手机号</div>
      </div>

      <!-- 发放完成提醒 -->
      <div class="remind-item">
        <div class="remind-title">发放完成提醒</div>
        <div class="remind-content">
          <el-switch v-model="distributeRemind.enabled" />
          <div class="phone-input" v-if="distributeRemind.enabled">
            <el-input v-model="distributeRemind.phone" placeholder="请输入接收手机号码" maxlength="11" />
            <el-button type="primary" class="ml-2">添加</el-button>
          </div>
        </div>
        <div class="remind-desc">发放完成后将通过短信发送至接收手机号</div>
      </div>

      <!-- 余额不足提醒 -->
      <div class="remind-item">
        <div class="remind-title">余额不足提醒</div>
        <div class="remind-content">
          <el-switch v-model="balanceRemind.enabled" />
          <div class="balance-input" v-if="balanceRemind.enabled">
            <el-input v-model="balanceRemind.threshold" placeholder="请输入金额" type="number">
              <template #append>元</template>
            </el-input>
            <div class="phone-input">
              <el-input v-model="balanceRemind.phone" placeholder="请输入接收手机号码" maxlength="11" />
              <el-button type="primary" class="ml-2">添加</el-button>
            </div>
          </div>
        </div>
        <div class="remind-desc">余额低于预警时将通过短信发送至接收手机号</div>
      </div>

      <!-- 开票通知提醒 -->
      <div class="remind-item">
        <div class="remind-title">开票通知提醒</div>
        <div class="remind-content">
          <el-switch v-model="invoiceRemind.enabled" />
          <div class="phone-input" v-if="invoiceRemind.enabled">
            <el-input v-model="invoiceRemind.phone" placeholder="请输入接收手机号码" maxlength="11" />
            <el-button type="primary" class="ml-2">添加</el-button>
          </div>
        </div>
        <div class="remind-desc">开票截止日期前将通过短信发送至接收手机号</div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 资金实时提醒
const fundRemind = ref({
  enabled: false,
  phone: ''
});

// 发放完成提醒
const distributeRemind = ref({
  enabled: false,
  phone: ''
});

// 余额不足提醒
const balanceRemind = ref({
  enabled: false,
  threshold: '',
  phone: ''
});

// 开票通知提醒
const invoiceRemind = ref({
  enabled: false,
  phone: ''
});
</script>

<style scoped>
.merchant-remind {
  padding: 20px;
}

.card-header {
  font-weight: bold;
  font-size: 16px;
}

.remind-item {
  margin-bottom: 24px;
}

.remind-title {
  font-weight: bold;
  margin-bottom: 12px;
}

.remind-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.phone-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.remind-desc {
  margin-top: 8px;
  color: #909399;
  font-size: 12px;
}

.balance-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.balance-input .el-input {
  width: 200px;
}
</style>